<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
  <el-container>
    <el-aside style="width:50%">
      <el-header>
        <el-button type="primary" icon="el-icon-edit" @click="onAdd">{{$t('table.add')}}</el-button>
      </el-header>
      <el-main :style="{height:tableHeight+'px'}">
        <el-table :key="tableKey" :data="treeData" highlight-current-row border fit v-loading="tabLoading"
          row-key="id" @row-click="handleNodeClick"> 
        <el-table-column prop="id" label="栏目id" width="120" align="center" />
        <el-table-column prop="pid" label="上级栏目" width="120" align="center" />
        <el-table-column prop="class_type" label="栏目类型" width="120" align="center" :formatter="commentFormat" />
        <el-table-column prop="class_name" label="栏目名称" width="120" align="center" />
        <el-table-column prop="path" label="访问路径" width="120" align="center" />
        <el-table-column prop="display" label="显示在栏目" width="120" align="center" :formatter="commentFormat" />
        </el-table>
      </el-main>
    </el-aside>
    <el-main>
      <el-form ref="dataForm" :model="formData" label-width="200px" style="padding:5% 5% 0 5%">
        <el-form-item>
          <el-button type="primary" v-if="curdAction=='update' || curdAction=='add'" @click="onSave" :loading="saveLoading">{{$t('table.save')}}</el-button>
          <el-button type="primary" v-if="curdAction=='update'" icon="el-icon-search" @click="onInfoPage()">{{ $t('table.info') }}</el-button>
 
          <el-dropdown v-if="curdAction=='update'" @command="onInfoPages">
            <el-button type="primary">
              <i class="el-icon-edit el-icon--right"></i>扩展编辑<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit" :command="{b:'editarticle_class_ex'}">{{$t('table.edit')}}栏目扩展</el-dropdown-item> 
              <el-dropdown-item icon="el-icon-edit" :command="{b:'editarticle_class_seo'}">{{$t('table.edit')}}栏目seo</el-dropdown-item> 
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="danger" icon="el-icon-delete" v-if="curdAction=='update'" :loading="delLoading" @click="onDel">{{$t('table.delete')}}</el-button>
        </el-form-item>
          <input type="hidden" v-model="formData.id"/>
        <el-form-item label="上级栏目：">
          <treeselect
            :options="pidCascaderData"
            :default-expand-level="3" :flatten-search-results="true"
            v-model="formData.pid"
            placeholder=""
            :normalizer="pidNormalizer"
          />
        </el-form-item>
        <el-form-item label="栏目类型：">
            <el-select v-model="formData.class_type" placeholder="请选择">
                <el-option
                  v-for="item in class_typeSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="栏目名称：">
          <el-input v-model="formData.class_name" placeholder="请输入栏目名称"></el-input>
        </el-form-item>
        <el-form-item label="访问路径：">
          <el-input v-model="formData.path" placeholder="请输入访问路径"></el-input>
        </el-form-item>
        <el-form-item label="显示在栏目：">
          <el-radio-group v-model="formData.display">
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <el-radio-group v-model="formData.display">
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body .el-container .el-aside{
  background: #fff !important;
}
</style>
<script>
import {
  article_classSelecttree,
  article_classAdd,
  article_classUpdate,
  article_classDel,
  article_classInfo
} from '@/api/project/article/project_article_article_class'
import {
  articleSelect,articleSelecttree,articleSelectpage
} from '@/api/project/article/project_article_article'
import treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {treeselect,},
  name: "a_articlea_article_class",
  watch: {
  },
  data() {
    return {
      curdAction: "",
      saveLoading: false,
      delLoading: false,
      tabLoading: false,
      tableKey: 'article_article_class_table',
      tableHeight: (window.innerHeight-210),
      formData: {
        id: null, 
        pid: null,
 
        class_type: null, 
        class_name: null, 
        path: null, 
        display: null, 
      },
      treeData: [
      ],
      pidCascaderData: [
      ],
      class_typeSelectData: [
        {value: 1,label: '资讯'},
      ],
    };
  },
  mounted(){
    let that =this;
    window.onresize=()=>{
      this.tableHeight = (window.innerHeight-210);
    }
  },
  created(){
    this.getList();
    this.pidCascaderDataList();
  },
  methods: {
    pidCascaderDataList(queryString,cb){
        article_classSelecttree().then(r=>{
            this.pidCascaderData = r.dataArray.dataList;
        })
    },
      pidNormalizer(node){
        if (node.children == undefined || node.children == null || node.children.length==0) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.class_name,
          children: node.children
        };
      }, 
    handleNodeClick(data,node,tree){
        this.onInfo(data);
        this.curdAction="update";
    },
    getList(){
      this.tabLoading=true;
      article_classSelecttree().then(r=>{
        this.treeData = r.dataArray.dataList;
      this.tabLoading=false;
      })
    },
    onInfoPage(){
      var view = this.$store.state.permission.routesMap["/article/article_class_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:this.formData.id} })
    },
    onInfoPages(commend){ 
      if(commend.b=='editarticle_class_ex'){
        var view = this.$store.state.permission.routesMap["/article/article_class_ex_edit"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:this.formData.id} })
      }
      if(commend.b=='editarticle_class_seo'){
        var view = this.$store.state.permission.routesMap["/article/article_class_seo_edit"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:this.formData.id} })
      }
    },
    reset(){
      this.formData = {
        id: null, 
        pid: null, 
        class_type: null, 
        class_name: null, 
        path: null, 
        display: null, 
      };
        this.pidCascaderDataList();
    },
    dateFormat(row, column, cellValue, index){
      return this.$moment(cellValue).format("YYYY/MM/DD");
    }, 
    commentFormat(row, column, cellValue, index){
      try {
        var comment = "";
        if(column.property=='class_type'){
          comment='栏目类型:资讯=1';
        }
        if(column.property=='display'){
          comment='显示在栏目:是=1 否=0';
        }
        var array = comment.split(':')[1].split(' ');
        var obj = {};
        for(var i=0;i<array.length;i++){
          var split = array[i].split('=');
          obj[split[1]]=split[0];
        }
        if(obj[cellValue]) return obj[cellValue];
        return cellValue;
      } catch (error) {
        return cellValue;
      }
    },
    onAdd(){
      this.curdAction = "add";
      this.reset();
    },
    onSave(){
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.curdAction == "add") {
            article_classAdd(this.$qs.stringify(this.formData)).then(r => {
                this.getList();
                this.reset();
                this.curdAction = '';
                this.saveLoading  = false;
            });
          } else if (this.curdAction == "update") {
            article_classUpdate(this.$qs.stringify(this.formData)).then(r => {
                this.getList();
                this.reset();
                this.curdAction = '';
                this.saveLoading  = false;
            });
          }
        }
      });
    },
    onDel(){
        var that = this;
        this.$confirm('确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            article_classDel(that.$qs.stringify({id:that.formData.id})).then(r=>{
                that.getList();
                that.reset();
                that.curdAction = '';
                that.delLoading  = false;
                that.$notify({
                    message: "删除成功",
                    type: "success"
                });
            }); 
        }).catch(() => {
            this.$notify({
                message: "已取消删除",
                type: "info"
            }); 
        });
    },
    onInfo(data){
        article_classInfo({id:data.id}).then(r=>{
            this.formData.id=r.dataSingle.id;
            if(r.dataSingle.pid==0){this.formData.pid=null;}else{this.formData.pid=r.dataSingle.pid;}
            this.formData.class_type=r.dataSingle.class_type;
            this.formData.class_name=r.dataSingle.class_name;
            this.formData.path=r.dataSingle.path;
            this.formData.display=r.dataSingle.display;
        });
    }
  }
};
</script>